<!-- 
    @作者：814878176@qq.com
    @时间：2020-03-20
    @描述：自定义弹框  UniModalTipsCell
    @使用：
          在js里面调用index.js设置的方法，例如：
          1. 传数据集： (根据data里面设置的参数或者方法传对应的值)
                this.$UniModalTips.error({
                        content: "提示信息",
                        onOk: ()=> {
                            timeoutTimes = 0;
                        },
                        onCancel: ()=> {
                            timeoutTimes = 0;
                        }
                    });
				
				this.$UniModalTips.success({
					content: "提交成功！",
					onChange: (val)=>{
						if(!val.show) {
							关闭弹框操作
						}
					},
				});
          2. 简写方式： (只传提示内容)
                this.$UniModalTips.success( "提交成功！");   
 -->
 <template>
    <transition name="IvuModalTips">
		<uni-popup ref="popup" :type="newType" :custom="true" :mask-click="maskClosable" @change="onChangeFun">
			<view class="uni-tip">
				<!-- 关闭按钮 -->
				<view class="close-btn" v-if="closable" @click="onCancelFun()"></view>
				<!-- 内容 -->
				<view class="uni-tip-content uni-flex uni-row uni-flex-center">
					<view v-if="type=='confirm'" class="icon confirm-icon"></view>
					<view v-if="type=='success'" class="icon success-icon"></view>
					<view v-if="type=='delete'" class="icon delete-icon"></view>  
					<view v-if="type=='error'" class="icon error-icon"></view>
					<view v-if="type=='tips'" class="icon tips-icon"></view>
					<view class="content" v-html="content"></view>
				</view>
				<!-- 操作按钮 -->
				<view class="uni-btn-box uni-flex uni-row uni-flex-around" :class="cancelText && okText ? 'two-btn':'one-btn'">
					<button v-if="cancelText" type="primary" size="mini" plain="true" @click="onCancelFun()">
						{{cancelText}}
					</button>
					<button v-if="okText" type="primary" size="mini" @click="onOkFun()">
						{{okText}}
					</button>
				</view>
			</view>
		</uni-popup>
    </transition>
</template>


<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
    export default {
		components: {
			uniPopup
		},
        data () {
            return {
				newType: 'center',
                visible: false,
                loading: false,
                content: "",
                closable: true,
                maskClosable: true,
                title: "",
                width: "",  //不设定宽度，根据内容长度自适应
                okText: "确定",
                cancelText: "取消",
                styles: {},
                className: "",
                footerHide: false,
                scrollable: false,
                mask: true,
                draggable: false,
                onOk: ()=>{},
                onCancel: ()=>{},
                onChange: (val)=>{},
                times: 0,   //定时器 - 如果手动关闭了，则不再自动关闭移除当前组件
            }
        },
        watch: {
			visible: {
				handler() {
					if(this.visible) {
						this.$refs.popup.open();   // 弹出框
					}
				}
			},
            type: {
                handler() {
                    switch(this.type) {
                        case "delete":
                            
                            break;
                        case "success":
							// 自定关闭
                            this.times = setTimeout(()=>{
								console.log(this.times)
                                if(this.times){
                                    this.onCancelFun();
                                }
                            },5000)
                            break;
                        case "error": 
                            
                            break;
                    }
                },
                immediate: true
            }
        },
        methods: {
			// 确认按钮
            onOkFun() {
				this.$refs.popup.close();
                this.onOk();
                this.times = 0;
            },  
			// 取消按钮
            onCancelFun () {
				this.$refs.popup.close();
                this.onCancel();
                this.times = 0;
            },
			// 状态变化
            onChangeFun(val) {
                this.onChange(val);
				if(val && !val.show) {
					this.times = 0;
				}
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '../../common/css/var.styl';
    $imgPath = "~@/static/";
	.uni-tip {
		min-width: calc(100vw - 200upx);
		max-width: calc(100vw - 60upx);
		margin: auto;
		text-align: center;
		background-color: #fff;
		// 关闭按钮
		.close-btn {
			position: absolute;
			top: 6upx;
			right: 6upx;
			z-index: 9;
			width: 42upx;
			height: 42upx;
			SetCenterBg( $imgPath + "icons/guanbi.png" );
		}
		// 提示内容
		.uni-tip-content {
			min-height: 180upx;
			line-height: 46upx;
			box-sizing: border-box;
			padding: 20upx;
			padding-top: 60upx;
			.icon {
				width: 46upx;
				height: 46upx;
				margin-right: 12upx;
				margin-top: 4upx;
				&.confirm-icon {
					SetCenterBg( $imgPath + "modalTipIcon/queren.png" );
				}
				&.success-icon {
					SetCenterBg( $imgPath + "modalTipIcon/chenggong.png" );
				}
				&.delete-icon {
					SetCenterBg( $imgPath + "modalTipIcon/tixing.png" );
				}
				&.error-icon {
					SetCenterBg( $imgPath + "modalTipIcon/shibai.png" );
				}
				&.tips-icon {
					SetCenterBg( $imgPath + "modalTipIcon/tips.png" );
				}
			}
			.content {
				max-width: calc(100% - 80upx);
				line-height: 56upx;
				font-size: 32upx;
				font-weight: bold;
				letter-spacing: 1upx;
				// 文字不会自动换行的解决方法
				overflow-wrap: break-word;
				word-wrap: break-word;
			}
		}
		// 操作按钮
		.uni-btn-box {
			line-height: 80upx;
			uni-button {
				font-size: 30upx;
			}
			// 只有一个按钮的样式
			&.one-btn {
				// border-top: solid 2upx #c1c1c1;
				uni-button {
					width: 100%;
					padding: 0;
					color: #1ca6ec;
					background: transparent;
				}
			}
		}
	}
</style>
